<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('修改部门')"/>
    <th:block th:include="include :: cropper-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-dept-edit" th:object="${dept}">
        <input name="deptId" type="hidden" th:field="*{deptId}"/>
        <input id="treeId" name="parentId" type="hidden" th:field="*{parentId}"/>
        <div class="form-group">
            <label class="col-sm-3 control-label">上级机构：</label>
            <div class="col-sm-8">
                <div class="input-group">
                    <input class="form-control" type="text" id="treeName" onclick="selectDeptTree()" readonly="true"
                           th:field="*{parentName}">
                    <span class="input-group-addon"><i class="fa fa-search"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">机构名称：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="deptName" th:field="*{deptName}" id="deptName" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">显示排序：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="orderNum" th:field="*{orderNum}" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">负责人：</label>
            <div class="col-sm-8">
                <select name="leader" class="form-control m-b"
                        th:with="type=${@user.selectUserListByDeptId(deptId)}">
                    <option value="">请选择</option>
                    <option th:each=" user : ${type}" th:text="${user.userName}" th:value="${user.userId}"
                            th:field="*{leader}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label  is-required">地址：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="address" th:field="*{address}" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">定位经纬度：</label>
            <div class="col-sm-8">
                <div class="input-group">
                    <input class="form-control" type="text" name="coordinate" th:field="*{coordinate}">
                    <span class="input-group-addon"><a target="_blank"
                                                       href="https://lbs.qq.com/tool/getpoint/index.html"><i
                            class="fa fa-location-arrow"></i></a></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">电子地图经纬度：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="mapCoordinate" th:field="*{mapCoordinate}">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">网格经纬度：</label>
            <div class="col-sm-8">
                <textarea class="form-control" type="text" name="mapGridCoordinate" th:field="*{mapGridCoordinate}"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">网格LOGO：
                <br><span style="color: red">(120px*120px)</span>
            </label>
            <div class="col-sm-9">
                <input type="hidden" name="mapLogo" id="mapLogo" th:field="*{mapLogo}">
                <div class="imageBox">
                    <img id="mapLogoImage"
                         th:src="(${#strings.isEmpty(dept.mapLogo)}) ? @{/img/default.png} : @{${dept.mapLogo}}"
                         th:onerror="'this.src=\'' + @{'/img/default.png'} + '\''">
                </div>
                <div class="action">
                    <div class="new-contentarea tc">
                        <a href="javascript:void(0)" class="upload-img"><label for="inputImage">上传图像</label>
                        </a>
                        <input type="file" name="inputImage" id="inputImage" accept="image/*"/>
                    </div>
                    <button type="button" class="btn-custom" data-method="zoom" data-option="0.1"><i
                            class="fa fa-search-plus"></i></button>
                    <button type="button" class="btn-custom" data-method="zoom" data-option="-0.1"><i
                            class="fa fa-search-minus"></i></button>
                    <button type="button" class="btn-custom" data-method="rotate" data-option="-45"><i
                            class="fa fa-rotate-left"></i></button>
                    <button type="button" class="btn-custom" data-method="rotate" data-option="45"><i
                            class="fa fa-rotate-right"></i></button>
                    <button type="button" class="btn-custom" data-method="scaleX" data-option="-1"><i
                            class="fa fa-arrows-h"></i></button>
                    <button type="button" class="btn-custom" data-method="scaleY" data-option="-1"><i
                            class="fa fa-arrows-v"></i></button>
                    <button type="button" class="btn-custom" data-method="reset"><i class="fa fa-refresh"></i>
                    </button>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">联系电话：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="phone" th:field="*{phone}" maxlength="11">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">邮箱：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="email" th:field="*{email}">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required"> 机构类型：</label>
            <div class="col-sm-8">
                <select name="deptType" class="form-control m-b" th:with="type=${@dict.getType('sys_dept_type')}"
                        required>
                    <option value="">请选择</option>
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"
                            th:field="*{deptType}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required"> 城乡类型：</label>
            <div class="col-sm-8">
                <select name="urbanRuralType" class="form-control m-b" th:with="type=${@dict.getType('sys_urban_rural_type')}"
                        required>
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"
                            th:field="*{urbanRuralType}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">区域编码：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="gridCode" th:field="*{gridCode}" maxlength="12">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">机构状态：</label>
            <div class="col-sm-8">
                <div class="radio-box" th:each="dict : ${@dict.getType('sys_normal_disable')}">
                    <input type="radio" th:id="${dict.dictCode}" name="status" th:value="${dict.dictValue}"
                           th:field="*{status}">
                    <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
                </div>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: cropper-js"/>
<script type="text/javascript">
    var prefix = ctx + "system/dept";

    $("#form-dept-edit").validate({
        onkeyup: false,
        rules: {
            deptName: {
                remote: {
                    url: prefix + "/checkDeptNameUnique",
                    type: "post",
                    dataType: "json",
                    data: {
                        "deptId": function () {
                            return $("#deptId").val();
                        },
                        "parentId": function () {
                            return $("input[name='parentId']").val();
                        },
                        "deptName": function () {
                            return $.common.trim($("#deptName").val());
                        }
                    },
                    dataFilter: function (data, type) {
                        return $.validate.unique(data);
                    }
                }
            },
            orderNum: {
                digits: true
            },
            email: {
                email: true,
            },
        },
        messages: {
            "deptName": {
                remote: "部门已经存在"
            }
        },
        focusCleanup: true
    });

    var cropper;
    var croppable = false;
    $(window).on('load', function () {
        //logo
        var image = document.getElementById('mapLogoImage');
        cropper = new Cropper(image, {
            aspectRatio: 1,//设置宽高比例
            viewMode: 1,
            autoCropArea: 1,
            //preview: '.img-preview',
            ready: function () {
                croppable = true;
            }
        })

        $('#inputImage').on('change', function () {
            var reader = new FileReader();
            var file = $('#inputImage')[0].files[0];
            if (/^image\/\w+$/.test(file.type)) {
                reader.onload = function (e) {
                    if (croppable) {
                        cropper.replace(e.target.result)
                    }
                }
                reader.readAsDataURL(this.files[0]);
            } else {
                $.modal.alertWarning('请选择一个图片文件。');
            }
        });

        $('.btn-custom').on('click', function (e) {
            if (!croppable) {
                $.modal.alertWarning("裁剪框加载中,请稍候...");
                return;
            }
            var data = {
                method: $(this).data('method'),
                option: $(this).data('option') || undefined,
            };
            var result = cropper[data.method](data.option, data.secondOption);
            if (['scaleX', 'scaleY'].indexOf(data.method) !== -1) {
                $(this).data('option', -data.option)
            }
        })
    });
    //设置裁剪高度
    $(window).resize(function () {
        $('.imageBox').height("120px");
        $('.cropped').height("120px");
    }).resize();
    if (!HTMLCanvasElement.prototype.toBlob) {
        Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
            value: function (callback, type, quality) {
                var canvas = this;
                setTimeout(function () {
                    var binStr = atob(canvas.toDataURL(type, quality).split(',')[1]);
                    var len = binStr.length;
                    var arr = new Uint8Array(len);
                    for (var i = 0; i < len; i++) {
                        arr[i] = binStr.charCodeAt(i);
                    }
                    callback(new Blob([arr], {
                        type: type || 'image/png'
                    }));
                });
            }
        });
    }

    function submitHandler() {
        if (!croppable) {
            $.modal.alertWarning("裁剪框加载中,请稍候...");
            return;
        }
        if ($.validate.form()) {
            cropper.getCroppedCanvas().toBlob(function (img) {
                var formdata = new FormData();
                formdata.append("file", img);
                formdata.append("fileType", "/ecard/mapLogo");
                $.ajax({
                    url: ctx + "common/uploadCropperImage",
                    data: formdata,
                    type: "post",
                    processData: false,
                    contentType: false,
                    success: function (result) {
                        $("#mapLogo").val(result.data.fileUrl)
                        $.operate.save(prefix + "/edit", $('#form-dept-edit').serialize());
                    }
                })
            });
        }
    }

    /*部门管理-修改-选择部门树*/
    function selectDeptTree() {
        var deptId = $("#treeId").val();
        var excludeId = $("input[name='deptId']").val();
        if (deptId > 0) {
            var options = {
                title: '部门选择',
                width: "380",
                url: prefix + "/selectDeptTree/" + $("#treeId").val() + "/" + excludeId,
                callBack: doSubmit
            };
            $.modal.openOptions(options);
        } else {
            $.modal.alertError("父部门不能选择");
        }
    }

    function doSubmit(index, layero) {
        var tree = layero.find("iframe")[0].contentWindow.$._tree;
        if ($.tree.notAllowLastLevel(tree)) {
            var body = $.modal.getChildFrame(index);
            $("#treeId").val(body.find('#treeId').val());
            $("#treeName").val(body.find('#treeName').val());
            $.modal.close(index);
        }
    }
</script>
</body>
</html>
